<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal">
        <div :class="advanced ? null : 'fold'">
          <a-row>
            <a-col :md="6" :sm="24">
              <a-form-item
                label="类别"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-select placeholder="请选择">
                  <a-select-option
                    v-for="item in searchOptionsType"
                    :value="item.value"
                    :key="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item
                label="死亡方式"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-select placeholder="请选择">
                  <a-select-option
                    v-for="item in searchOptionsMode"
                    :value="item.value"
                    :key="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item
                label="查询内容"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-input-number style="width: 100%" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span style="float: right; margin-top: 3px">
                <a-button type="primary">查询</a-button>
                <a-button style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <a-tabs>
        <!-- 生者 -->
        <a-tab-pane key="1" tab="生者">
          <standard-table
            :columns="columnsDataLife"
            :dataSource="tableDataLife"
            :selectedRows.sync="selectedRows"
            @clear="onClear"
            @change="onChange"
            @selectedRowChange="onSelectChange"
          >
            <div slot="action" slot-scope="{ text, record }">
              <a style="margin-right: 8px"> <a-icon type="edit" />编辑 </a>
              <a @click="deleteRecord(record.key)">
                <a-icon type="delete" />删除
              </a>

              <router-link :to="`/list/query/detail/${record.key}`"
                >详情</router-link
              >
            </div>
            <template slot="statusTitle">
              <a-icon @click.native="onStatusTitleClick" type="info-circle" />
            </template>
          </standard-table>
        </a-tab-pane>
        <!-- 死者 -->
        <a-tab-pane key="2" tab="死者" force-render>
          <standard-table
            :columns="columnsDataLife"
            :dataSource="tableDataDie"
            :selectedRows.sync="selectedRows"
            @clear="onClear"
            @change="onChange"
            @selectedRowChange="onSelectChange"
          >
            <div slot="action" slot-scope="{ text, record }">
              <a style="margin-right: 8px"> <a-icon type="edit" />编辑 </a>
              <a @click="deleteRecord(record.key)">
                <a-icon type="delete" />删除
              </a>

              <router-link :to="`/list/query/detail/${record.key}`"
                >详情</router-link
              >
            </div>
            <template slot="statusTitle">
              <a-icon @click.native="onStatusTitleClick" type="info-circle" />
            </template>
          </standard-table>
        </a-tab-pane>
        <!-- 已删除 -->
        <a-tab-pane key="3" tab="已删除">
          <standard-table
            :columns="columnsDataLife"
            :dataSource="tableDataDelete"
            :selectedRows.sync="selectedRows"
            @clear="onClear"
            @change="onChange"
            @selectedRowChange="onSelectChange"
          >
            <div slot="action" slot-scope="{ text, record }">
              <a style="margin-right: 8px"> 恢复 </a>
              <router-link :to="`/list/query/detail/${record.key}`"
                >详情</router-link
              >
            </div>
            <template slot="statusTitle">
              <a-icon @click.native="onStatusTitleClick" type="info-circle" />
            </template> </standard-table
        ></a-tab-pane>
      </a-tabs>
    </div>
  </a-card>
</template>

<script>
import StandardTable from "@/components/table/StandardTable";
const dataSource = [];

for (let i = 0; i < 100; i++) {
  dataSource.push({
    key: i,
    no: "NO " + i,
    description: "这是一段描述",
    callNo: Math.floor(Math.random() * 1000),
    status: Math.floor(Math.random() * 10) % 4,
    updatedAt: "2018-07-26",
  });
}

export default {
  name: "QueryList",
  components: { StandardTable },
  data() {
    return {
      searchOptionsType: [
        { value: "1", label: "普通凡人" },
        { value: "2", label: "天庭天神" },
        { value: "3", label: "孤魂野鬼" },
        { value: "4", label: "妖魔鬼怪" },
        { value: "5", label: "天产石猴" },
      ],
      searchOptionsMode: [
        { value: "1", label: "善终" },
        { value: "2", label: "天灾" },
        { value: "3", label: "人祸" },
        { value: "4", label: "疾病" },
      ],
      // <el-table-column prop="ID" label="ID" align="center"/>
      // <el-table-column prop="name" label="姓名" align="center" />
      // <el-table-column prop="life" label="寿命（岁）" align="center" />
      // <el-table-column prop="type" label="类别" align="center" />
      // <el-table-column prop="mode" label="职业" align="center" />
      columnsDataLife: [
        {
          title: "ID",
          dataIndex: "ID",
        },
        {
          title: "姓名描述",
          dataIndex: "name",
        },
        {
          title: "寿命（岁）",
          dataIndex: "life",
          sorter: true,
        },
        { title: "类别", dataIndex: "type" },
        {
          title: "职业",
          dataIndex: "mode",
          sorter: true,
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" },
        },
      ],
      tableDataLife: [
        {
          ID: "魂001000号",
          name: "工藤新一",
          life: "18",
          type: "普通凡人",
          mode: "侦探",
        },
        {
          ID: "魂001001号",
          name: "蒙奇·D·路飞",
          life: "18",
          type: "普通凡人",
          mode: "五皇",
        },
        {
          ID: "魂001002号",
          name: "野比大雄",
          life: "10",
          type: "普通凡人",
          mode: "小学生",
        },
        {
          ID: "魂001003号",
          name: "野原新之助",
          life: "5",
          type: "普通凡人",
          mode: "小学生",
        },
        {
          ID: "魂001004号",
          name: "猪悟能",
          life: "1200",
          type: "天庭天神",
          mode: "天蓬元帅",
        },
        {
          ID: "魂001005号",
          name: "沙悟净",
          life: "1134",
          type: "天庭天神",
          mode: "卷帘大将",
        },
        {
          ID: "魂001006号",
          name: "唐三藏",
          life: "28",
          type: "普通凡人",
          mode: "取经人",
        },
        {
          ID: "魂001007号",
          name: "白龙马",
          life: "18",
          type: "天庭天神",
          mode: "龙王太子",
        },
        {
          ID: "魂001009号",
          name: "毛利小五郎",
          life: "42",
          type: "普通凡人",
          mode: "侦探",
        },
      ],
      tableDataDie: [
        {
          ID: "魂000100号",
          name: "秦始皇",
          life: "49",
          type: "普通凡人",
          mode: "疾病",
        },
        {
          ID: "魂000101号",
          name: "武则天",
          life: "82 ",
          type: "普通凡人",
          mode: "疾病",
        },
        {
          ID: "魂000102号",
          name: "李世明",
          life: "50",
          type: "普通凡人",
          mode: "善终",
        },
        {
          ID: "魂000103号",
          name: "朱元璋",
          life: "71",
          type: "普通凡人",
          mode: "疾病",
        },
        {
          ID: "魂000104号",
          name: "李白",
          life: "61",
          type: "普通凡人",
          mode: "天灾",
        },
        {
          ID: "魂000105号",
          name: "杜甫",
          life: "59",
          type: "普通凡人",
          mode: "疾病",
        },
        {
          ID: "魂000106号",
          name: "李清照",
          life: "71",
          type: "普通凡人",
          mode: "疾病",
        },
        {
          ID: "魂000107号",
          name: "张国荣",
          life: "46",
          type: "普通凡人",
          mode: "疾病",
        },
        {
          ID: "魂000107号",
          name: "白素贞",
          life: "1200",
          type: "妖魔鬼怪",
          mode: "善终",
        },
        {
          ID: "魂000107号",
          name: "许仙",
          life: "49",
          type: "普通凡人",
          mode: "善终",
        },
      ],
      tableDataDelete: [
        {
          ID: "魂000001号",
          name: "孙悟空",
          life: "642",
          type: "天产石猴",
          mode: "善终",
        },
        {
          ID: "魂000002号",
          name: "花果山猴001",
          life: "30",
          type: "妖魔鬼怪",
          mode: "善终",
        },
        {
          ID: "魂000003号",
          name: "花果山猴002",
          life: "30",
          type: "妖魔鬼怪",
          mode: "善终",
        },
        {
          ID: "魂000004号",
          name: "花果山猴003",
          life: "30",
          type: "妖魔鬼怪",
          mode: "善终",
        },
        {
          ID: "魂000005号",
          name: "花果山猴004",
          life: "30",
          type: "妖魔鬼怪",
          mode: "善终",
        },
        {
          ID: "魂000006号",
          name: "花果山猴005",
          life: "30",
          type: "妖魔鬼怪",
          mode: "善终",
        },
        {
          ID: "魂000007号",
          name: "花果山猴006",
          life: "30",
          type: "妖魔鬼怪",
          mode: "善终",
        },
        {
          ID: "魂000008号",
          name: "花果山猴007",
          life: "30",
          type: "妖魔鬼怪",
          mode: "善终",
        },
        {
          ID: "魂000009号",
          name: "花果山猴008",
          life: "30",
          type: "妖魔鬼怪",
          mode: "善终",
        },
        {
          ID: "魂000010号",
          name: "花果山猴009",
          life: "30",
          type: "妖魔鬼怪",
          mode: "善终",
        },
        {
          ID: "魂000011号",
          name: "花果山猴010",
          life: "30",
          type: "妖魔鬼怪",
          mode: "善终",
        },
        {
          ID: "魂000012号",
          name: "花果山猴011",
          life: "30",
          type: "妖魔鬼怪",
          mode: "善终",
        },
        {
          ID: "魂000013号",
          name: "花果山猴012",
          life: "30",
          type: "妖魔鬼怪",
          mode: "善终",
        },
        {
          ID: "魂000014号",
          name: "花果山猴013",
          life: "30",
          type: "妖魔鬼怪",
          mode: "善终",
        },
      ],
      advanced: true,

      dataSource: dataSource,
      selectedRows: [],
    };
  },
  authorize: {
    deleteRecord: "delete",
  },
  methods: {
    deleteRecord(key) {
      this.dataSource = this.dataSource.filter((item) => item.key !== key);
      this.selectedRows = this.selectedRows.filter((item) => item.key !== key);
    },
    toggleAdvanced() {
      this.advanced = !this.advanced;
    },
    remove() {
      this.dataSource = this.dataSource.filter(
        (item) =>
          this.selectedRows.findIndex((row) => row.key === item.key) === -1
      );
      this.selectedRows = [];
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },
    onStatusTitleClick() {
      this.$message.info("你点击了状态栏表头");
    },
    onChange() {
      this.$message.info("表格状态改变了");
    },
    onSelectChange() {
      this.$message.info("选中行改变了");
    },
    addNew() {
      this.dataSource.unshift({
        key: this.dataSource.length,
        no: "NO " + this.dataSource.length,
        description: "这是一段描述",
        callNo: Math.floor(Math.random() * 1000),
        status: Math.floor(Math.random() * 10) % 4,
        updatedAt: "2018-07-26",
      });
    },
    handleMenuClick(e) {
      if (e.key === "delete") {
        this.remove();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 54px;
}
.fold {
  width: calc(100% - 216px);
  display: inline-block;
}
.operator {
  margin-bottom: 18px;
}
@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
